<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Análisis y Diseño 2</title>
        <meta name="description" content="A responsive folded flyer-like restaurant menu with some 3D" />
        <meta name="keywords" content="css3, perspective, 3d, jquery, transform3d, responsive, template, restaurant, menu, leaflet, folded, flyer, concept" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="public/css/style.css" />
		<link href='http://fonts.googleapis.com/css?family=Raleway:300,500|Arvo:700' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="public/js/modernizr.custom.79639.js"></script> 
		<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
            	<a href="/Security/registro">Registro</a>
                <span class="right">
                	

                	#{if nombre}
	                    <a>Bienvenido/a: </a>
	                    <a href="/Security/closeSession">Cerrar sesión <strong>${nombre}</strong></a>
	                    <a href="/orden">Mi orden</a>
                	#{/if}
                	#{else}
	                	<a href="/Security/login">
	                        <strong>Inicia de sesión</strong>
	                    </a>
                	#{/else}
                </span>
            </div><!--/ Codrops top bar -->
			
			<header>
				
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<span class="no-cssanimations">CSS animations are not supported in your browser</span>
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">

				<div id="rm-container" class="rm-container">

					<div class="rm-wrapper">

						<div class="rm-cover">

							<div class="rm-front">
								<div class="rm-content">

									<div class="rm-logo"></div>
									<h2>Pizzas Gourmet</h2>
									<h3>Buen comer &amp; Pizza a domicilio</h3>

									<a href="#" class="rm-button-open">Ver el Menu</a>
									<div class="rm-info">
										<p>
										<strong>Pizzas Gourmet Restaurante</strong><br>
										69 Calle, esquina 4-24<br>
										Antigua Guatemala, Guatemala<br>
										<strong>Teléfono</strong> 22.10.20.12<br>
										<strong>Facebook</strong>/PizzasGourmet</p>
									</div>

									<p style="color:blue">${flash.success}</p>

								</div><!-- /rm-content -->
							</div><!-- /rm-front -->

							<div class="rm-back">
								<div class="rm-content">
									<h4>Entradas</h4>
									<dl>
										#{list items:entradas, as:'entrada'}
										<dt><a href="/agregar-orden/0/${entrada.id}" class="rm-viewdetails" data-precio="${entrada.precio?.format('#.00')}" data-thumb="${entrada.img}">${entrada.nombre}</a></dt>
										<dd>${entrada.descripcion}</dd>
										#{/list}
									</dl>

									<h4>Ensaladas y Mas</h4>
									<dl>
										#{list items:complementos, as:'complemento'}
										<dt><a href="/agregar-orden/0/${complemento.id}" class="rm-viewdetails" data-precio="${complemento?.precio.format('#.00')}" data-thumb="${complemento.img}">${complemento.nombre}</a></dt>
										<dd>${complemento.descripcion}</dd>
										#{/list}

									</dl>
								</div><!-- /rm-content -->
								<div class="rm-overlay"></div>

							</div><!-- /rm-back -->

						</div><!-- /rm-cover -->

						<div class="rm-middle">
							<div class="rm-inner">
								<div class="rm-content">
									<dl>
										<h4>Pizzas</h4>
										#{list items:pizzas, as:'pizza'}
										<dt><a href="/agregar-orden/1/${pizza.id}" class="rm-viewdetails" data-precio="${pizza.precio?.format('#.00')}" data-thumb="${pizza.img}">${pizza.nombre}</a></dt>
										<dd>${pizza.descripcion}</dd>
										#{/list}
									</dl>
								</div><!-- /rm-content -->
								<div class="rm-overlay"></div>
							</div><!-- /rm-inner -->
						</div><!-- /rm-middle -->

						<div class="rm-right">

							<div class="rm-front">
								
							</div>

							<div class="rm-back">
								<span class="rm-close">Cerrar</span>
								<div class="rm-content">
									<h4>Postres</h4>
									<dl>
										#{list items:postres, as:'postre'}
										<dt><a href="/agregar-orden/0/${postre.id}" class="rm-viewdetails" data-precio="${postre.precio?.format('#.00')}" data-thumb="${postre.img}">${postre.nombre}</a></dt>
										<dd>${postre.descripcion}</dd>
										#{/list}
									</dl>
									<div class="rm-order">
										<p><strong>¿Te gustaría que nos encargaramos de tus eventos?</strong> Llamanos &amp; nosotros te ayudamos a organizarlo: <strong>22.10.22.12</strong></p>
									</div>
								</div><!-- /rm-content -->
							</div><!-- /rm-back -->

						</div><!-- /rm-right -->
					</div><!-- /rm-wrapper -->

				</div><!-- /rm-container -->

			</section>
			
        </div>
		<!-- jQuery if needed -->
        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script-->
        <script type="text/javascript" src="public/js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="public/js/menu.js"></script>
		<script type="text/javascript">
			$(function() {

				Menu.init();
			
			});
		</script>
    </body>
</html>
